<template>
  <div class="box">
    <div class="content">
      <div class="logo" @click="home">
        <img src="@/assets/image/logo16.png" alt="" />
        <span>商驿企服数字科技平台</span>
      </div>

      <div class="login">
        <div class="login_left"></div>
        <div class="login_right" v-loading="loading">
          <div class="login_right_f1">登录</div>
          <div class="login_right_f2">
            <!-- <div class="cut">
              <h3 class="active">融资端</h3>
              <h3 @click="goExam">核心端</h3>
            </div> -->
          </div>
          <div class="login_right_f3">
            <template v-if="row == 1">
              <div class="login-box-input-box">
                <el-form :model="ruleForm" class="demo-ruleForm" :rules="regRules">
                  <el-form-item prop="phone" key="cut1">
                    <div class="login-uname">
                      <img src="@/assets/login/组119.png" alt="" />
                      <el-input
                        class="aaaa"
                        v-model="ruleForm.phone"
                        @keyup.enter.native="loginMsgcode"
                        placeholder="请输入账号"
                        @blur="a"
                      >
                      </el-input>
                      <p class="error" v-show="loginVerify.phone">请输入正确的手机号</p>
                    </div>
                  </el-form-item>
                  <el-form-item key="cut2" prop="msgcode">
                    <div class="login-uname">
                      <img style="width: 0.1146rem" src="@/assets/login/组120.png" alt="" />
                      <el-input
                        placeholder="请输入短信验证码"
                        type="text"
                        v-model="ruleForm.msgcode"
                        @keyup.enter.native="loginMsgcode"
                        @blur="verifyMsgcode"
                      >
                      </el-input>
                      <div class="timer">
                        <span v-if="time == 30" @click="getAuthCode(time, ruleForm.phone)"
                          >获取验证码</span
                        >
                        <span v-else>{{ time }}秒后重新获取</span>
                      </div>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
              <div class="login_right_f4">
                <!-- 服务协议 -->
                <div class="agreement">
                  <img
                    @click="submitBtn"
                    :src="require(`@/assets/login/组${radio ? '121' : '122'}.png`)"
                    alt=""
                  />
                  <span> 我已阅读并同意 </span>
                  <a
                    href="https://operate.thunlink.cn/protocol/sdzmq/平台服务协议.pdf"
                    target="_back"
                    >《平台服务协议》、</a
                  >
                  <a
                    href="https://operate.thunlink.cn/protocol/sdzmq/法律声明及隐私权政策.pdf"
                    target="_back"
                    >《隐私条款》</a
                  >
                </div>
              </div>
              <div class="login_right_f5">
                <div class="btn" @click="loginMsgcode">登录 / 注册</div>
              </div>
              <p class="kjdl wjmm">
                <span
                  @click="
                    row = 2
                    radio = false
                    loginVerify.phone = false
                  "
                  >账号密码登录</span
                >
              </p>
            </template>
            <template v-if="row == 2">
              <div class="login-box-input-box">
                <el-form :model="ruleForm" class="demo-ruleForm">
                  <el-form-item prop="phone">
                    <div class="login-uname">
                      <img src="@/assets/login/组119.png" alt="" />
                      <el-input
                        class="aaaa"
                        v-model="ruleForm.phone"
                        @keyup.enter.native="login"
                        placeholder="请输入账号"
                        @blur="a"
                      >
                      </el-input>
                      <p class="error" v-show="loginVerify.phone">请输入正确的手机号</p>
                    </div>
                  </el-form-item>
                  <el-form-item prop="pwd">
                    <div class="login-uname">
                      <img src="@/assets/login/组127.png" alt="" />
                      <el-input
                        class="aaaa"
                        :type="password"
                        v-model="ruleForm.pwd"
                        @keyup.enter.native="login"
                        placeholder="请输入密码"
                        @blur="b"
                      >
                      </el-input>
                      <div class="icon">
                        <img
                          @click="password = 'password'"
                          v-show="password == 'text'"
                          src="@/assets/login/眼睛_显示.png"
                          alt=""
                        />
                        <img
                          @click="password = 'text'"
                          v-show="password == 'password'"
                          src="@/assets/login/闭眼睛.png"
                          alt=""
                        />
                      </div>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
              <p class="wjmm">
                <span @click="goReg">没有账号？立即注册</span>
                <span @click="goUpdataPwd">忘记密码</span>
              </p>

              <div class="login_right_f5">
                <div class="btn" @click="login">登录</div>
              </div>
              <p class="kjdl wjmm">
                <span
                  @click="
                    row = 1
                    radio = false
                    loginVerify.phone = false
                  "
                  >快捷登录</span
                >
              </p>
              <!-- <p class="ljzc" @click="goLoginReg">立即注册</p> -->
            </template>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '@/components/Footer.vue'
import { userLogin, smsSend, myPostFetch } from '@/utils/index'
export default {
  components: { Footer },
  data() {
    return {
      password: 'password',
      loading: false,
      row: 2,
      code: false,
      time: 30,
      radio: false, //企业授权服务状态变量
      ruleForm: {
        phone: '',
        pwd: '',
        msgcode: '' //验证码
      },
      loginVerify: {
        phone: null
      },
      regRules: {
        phone: [{ required: true, message: ' ', trigger: 'blur' }],
        msgcode: [{ required: true, message: ' ', trigger: 'blur' }]
      }
    }
  },
  methods: {
    home() {
      if (this.$route.path == '/home') return
      this.$router.push('/home')
    },
    // 验证码校验
    verifyMsgcode() {
      if (this.ruleForm.msgcode.length != 6) {
        this.ruleForm.msgcode = ''
        return
      }
    },
    submitBtn() {
      this.radio = !this.radio
    },
    // 登录手机号验证
    a() {
      this.loginVerify.phone = null
      let value = Number(this.ruleForm.phone)
      if (this.ruleForm.phone == '') return
      this.ruleForm.phone = value.toFixed(0)
      let reg = /^1[3-9]\d{9}$/
      if (!reg.test(this.ruleForm.phone)) {
        this.ruleForm.phone = ''
        this.loginVerify.phone = true
      }
    },
    b() {},
    // 验证码登录
    async loginMsgcode() {
      if (this.ruleForm.phone == '') return this.$Message.error('请输入手机号')
      if (this.ruleForm.msgcode == '') {
        this.$Message.error('请输入验证码')
        return
      }
      if (!this.radio) {
        this.$Message.error('请勾选协议')
        this.loading = false
        return
      }
      this.loading = true
      let url = '/api/entlogin/phonelogin'
      let params = {
        smsCode: this.ruleForm.msgcode,
        userNo: this.ruleForm.phone
      }
      let data = await myPostFetch(url, params)
      if (data.code == 122 || data.code == 105) {
        this.loading = false
        this.$Message.error('验证码错误，请重新输入')
        return
      }
      if (data.data.aaa == 1 || data.code == 112) {
        let id = data.data.user.id
        this.$router.push(`/setPassword?id=${id}`)
        this.loading = false
        return
      }
      if (data.code == 100) {
        sessionStorage.setItem('customerid', data.data.customerid)
        this.$store.commit('updataCustomerid', data.data.customerid)
        // token;
        sessionStorage.setItem('token', data.data.token)
        this.$store.commit('updateToken', data.data.token)
        // 用户名称
        sessionStorage.setItem('userName', data.data.username)
        this.$store.commit('updateUserName', data.data.username)
        // 企业名称
        sessionStorage.setItem('entname', data.data.entname)
        this.$store.commit('updateEntname', data.data.entname)
        // 认证状态
        sessionStorage.setItem('rzstatus', data.data.rzstatus)
        this.$store.commit('upRzstatus', data.data.rzstatus)
        // copid
        sessionStorage.setItem('coopid', data.data.coopid)
        this.$store.commit('coopid', data.data.coopid)
        // 用户id
        sessionStorage.setItem('id', data.data.id)
        this.$store.commit('id', data.data.id)
        // 用户电话号码
        sessionStorage.setItem('userPhone', data.data.phone)
        // this.$store.commit("userPhone", data.data.phone);
        // 用户登录时间变量
        sessionStorage.setItem('date', data.data.date)
        this.$store.commit('updataDate', data.data.date)
        // 开票状态
        sessionStorage.setItem('coopeorg', data.data.coopeorg)
        // 登录状态
        sessionStorage.setItem('loginState', true)
        // 跳转
        this.$Message({
          message: '登录成功，欢迎您使用商驿企服数字科技平台',
          type: 'success',
          duration: '1500'
        })
        this.loading = false
        this.$router.push('/')
      } else {
        this.$Message.error(data.msg ? data.msg : '服务器错误')
        this.loading = false
      }
    },
    // 点击登录按钮
    async login() {
      this.loading = true
      if (this.ruleForm.phone != '' && this.ruleForm.pwd != '') {
        let data = await userLogin(this.ruleForm.phone, this.ruleForm.pwd)
        // 登录成功后，将登录信息存入store中，调用updateUserInfo方法，
        if (data.msg == 'ok') {
          sessionStorage.setItem('customerid', data.data.customerid)
          // token;
          sessionStorage.setItem('token', data.data.token)
          // 用户名称
          sessionStorage.setItem('userName', data.data.username)
          // 企业名称
          sessionStorage.setItem('entname', data.data.entname)
          // 认证状态
          sessionStorage.setItem('rzstatus', data.data.rzstatus)
          // copid
          sessionStorage.setItem('coopid', data.data.coopid)
          // 用户id
          sessionStorage.setItem('id', data.data.id)
          // 用户电话号码
          sessionStorage.setItem('userPhone', data.data.phone)
          // 用户登录时间变量
          sessionStorage.setItem('date', data.data.date)
          // 开票状态
          sessionStorage.setItem('coopeorg', data.data.coopeorg)
          // 登录状态
          sessionStorage.setItem('loginState', true)
          // 跳转
          this.$Message({
            message: '登录成功，欢迎您使用商驿企服数字科技平台',
            type: 'success',
            duration: '1500'
          })
          this.loading = false
          this.$router.push('/')
        } else if (data.code == 800) {
          this.$Message.error('登录失败，密码错误')
          this.loading = false
        } else {
          this.$Message.error(data.msg ? data.msg : '服务器错误')
          this.loading = false
        }
      } else {
        this.$Message.error('请输入账号密码')
        this.loading = false
      }
    },
    // 获取验证码
    async getAuthCode(time, phoneno) {
      if (phoneno == '') return this.$Message.error('请输入手机号')
      this.loading = true

      let reg = /^1[3-9]\d{9}$/
      if (!reg.test(phoneno)) return
      let data = await smsSend(phoneno)
      if (data.msg == 'ok') {
        this.$Message.success('验证码发送成功')
        this.loading = false
        this.code = true
        if (time != 30) {
          return
        }
        let times = setInterval(() => {
          time--
          this.time = time
          if (this.time == -1) {
            clearInterval(times)
            this.time = 30
          }
        }, 1000)
        return
      }
      this.$Message.error('验证码发送失败请检查手机号')
      this.loading = false
    },
    // 跳转注册页
    goLoginReg() {
      this.$router.push('/loginreg')
    },
    // 跳转注册页

    goReg() {
      this.$router.push('/loginreg')
    },
    // 跳转忘记密码页
    goUpdataPwd() {
      this.$router.push('/updataPwd')
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  // width: 10rem;
  height: 4.1667rem;
  background: url(@/assets/login/组124.png) no-repeat;
  background-size: 100% 100%;
  opacity: 1;
  .content {
    box-sizing: border-box;
    padding-top: 0.2083rem;
    margin: 0 auto;
    width: 8.5938rem;
    height: 4.1667rem;

    // background-color: rgb(196, 152, 152);
    .logo {
      cursor: pointer;
      display: flex;
      align-items: center;
      height: 0.2604rem;
      span {
        font-size: 0.1042rem;
        font-weight: bold;
        color: #000000;
        margin-left: 0.0781rem;
      }
      img {
        width: 0.3021rem;
      }
    }
    .login {
      display: flex;
      justify-content: space-evenly;
      margin-top: 0.2604rem;
      height: 3.125rem;
      .login_left {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.6042rem;
        height: 100%;
      }
      .login_right {
        box-sizing: border-box;
        padding: 0.1979rem 0.2031rem;
        width: 2.5rem;
        height: 2.8646rem;
        background: #ffffff;
        // box-shadow: 0.0521rem 0.0313rem 0.2083rem 0.0313rem #b7bbc1;
        border-radius: 0.0625rem;
        opacity: 1;
        .login_right_f1 {
          display: flex;
          justify-content: flex-start;
          width: 100%;
          font-size: 0.1563rem;
          font-family: Source Han Sans SC;
          font-weight: 500;
          color: #000000;
        }
        .login_right_f2 {
          width: 100%;
          height: 0.2604rem;
          margin-bottom: 0.2396rem;
          border-bottom: 1px solid #ddd;
          // 切换
          .cut {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 0.3125rem;
            z-index: 99;
            margin-top: 0.1042rem;
            margin-bottom: 0.1563rem;
            h3 {
              height: 0.2083rem;
              width: 0.625rem;
              line-height: 0.1458rem;
              text-align: center;
              box-sizing: border-box;
              font-size: 0.0938rem;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #adadad;
              border-bottom: 0.0104rem solid #d0d0d0;
              cursor: pointer;
              &.active {
                box-sizing: border-box;
                border-bottom: 0.0104rem solid #3f6ef2;
                color: #3f6ef2;
              }
            }
          }
        }
        .login_right_f3 {
          margin: 0 auto;
          width: 2.0104rem;
          height: 0.6406rem;
          .login-box-input-box {
            position: relative;
            width: 100%;
            height: 0.6406rem;
            .login-uname {
              display: flex;
              align-items: center;
              box-sizing: border-box;
              .icon {
                display: flex;
                position: absolute;
                height: 100%;
                img {
                  width: 0.125rem;
                  position: absolute;
                  left: 1.7708rem;
                  top: 0.0729rem;
                }
              }
              .error {
                position: absolute;
                top: 0.2344rem;
                left: 0.1302rem;
                color: #ef2d46;
              }
              .timer {
                height: 0.2083rem;
                position: absolute;
                right: 0.1406rem;
                top: 0.026rem;
                font-size: 0.0833rem;
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #3f6ef2;
                cursor: pointer;
                user-select: none;
                // background-color: #f00;
              }
              img {
                position: absolute;
                left: 0.0781rem;
                top: 0.0885rem;
                width: 0.0833rem;
                z-index: 9;
              }
            }
          }
        }
        .login_right_f4 {
          margin-top: 0.1823rem;
          margin-bottom: 0.125rem;
          // 服务协议
          .agreement {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 120%;
            height: 0.1302rem;
            text-align: center;
            margin-left: -0.1875rem;
            user-select: none;
            span {
              font-size: 0.0729rem;
              color: #666;
              margin-left: 0.0365rem;
            }
            img {
              width: 0.0781rem;
              height: 0.0781rem;
              cursor: pointer;
            }
            a {
              font-size: 0.0729rem;
              color: #1e53ff;
            }
          }
        }
        .login_right_f5 {
          width: 100%;
          height: 0.2604rem;
          .btn {
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            width: 2.0104rem;
            height: 0.2604rem;
            background: linear-gradient(-90deg, #5d98f8, #4b5af8);
            box-shadow: 0rem 0.0313rem 0.1042rem 0rem rgba(0, 40, 193, 0.5);
            border-radius: 0.0313rem;
            font-size: 0.1042rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #ffffff;
          }
        }
        .wjmm {
          display: flex;
          justify-content: space-between;
          width: 100%;
          height: 0.125rem;
          font-size: 0.0729rem;
          color: #6a85d0;
          margin-bottom: 0.2083rem;
          margin-top: 0.1042rem;
          span {
            cursor: pointer;
            // border-bottom: 1px solid #6a85d0;
          }
        }
        .kjdl {
          justify-content: flex-start;
          margin-top: 0.2083rem;
        }
        .ljzc {
          display: flex;
          justify-content: center;
          width: 100%;
          height: 0.0781rem;
          font-size: 0.0833rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #6a85d0;
          margin-top: 0.1042rem;
          cursor: pointer;
        }
      }
    }
  }
}
/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  padding: 0 0.2083rem;
  width: 2.0104rem;
  height: 0.2604rem;
  border: 0.0052rem solid #e0dede;
  border-radius: 0.0313rem;
}
::v-deep .el-input__inner {
  &::placeholder {
    font-size: 0.0833rem;
    font-family: 'Microsoft YaHei';
  }
  color: #555;
  font-family: 'Microsoft YaHei';
  font-size: 0.0781rem !important;
}
::v-deep .el-form-item__content {
  line-height: 0.2083rem;
  position: relative;
  font-size: 0.0729rem;
}
::v-deep .el-form-item {
  margin-bottom: 0.1302rem;
}
</style>
